<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Main page</title>
    <style>
        .blue-bar{
            background-color: #0069A9;
            color: white;
            padding: 10px;
            text-align: center;
            width: 100%;
        }
        .picture{
            display: flex;
            justify-content: center;
            align-content: center;
        }
        body{
            font-family: "Verdana",sans-serif;
            background-color: #f4f4f4;
            text-align: center;
        }
    </style>
</head>
<body>
<br>
<div class="blue-bar">
    <h2>ЦЕНТР ТЕХНИЧЕСКОЙ ДИАГНОСТИКИ АО "МОСВОДОКАНАЛ"</h2>
</div>
<br>
<h4>Заполните форму для получения пропуска на территорию ЦТД АО "Мосводоканал"</h4>
<form action="/getcode" method="post" align="center">
    <br/><br>
    Наименование организации: <input type="text" name="organization">
    <br/><br>
    Фамилия: <input type="text" name="surname"> Имя: <input type="text" name="name"> Отчество: <input type="text" name="patronymic">
    <br/><br>
    Паспорт: серия <input type="text" name="serial"> № <input type="text" name="number">
    <br/><br>
    Дата посещения: <input type="text" name="date">
    <br/><br>
    <button type="submit">Отправить</button>
</form>
<br>
<br>
<p align="center" th:text="${message}"></p>
<div class="picture">
    <img th:src="@{'data:image/png;base64,'+${qrCode}}" />
</div>
</body>
</html>